import { ProCard } from '@ant-design/pro-components';
import RcResizeObserver from 'rc-resize-observer';
import { useState } from 'react';
import { Card, Col, Row,Modal } from 'antd';
import { Button, Statistic, Checkbox, Form, type FormProps, Input } from 'antd';
import { GoldOutlined, ApiOutlined } from '@ant-design/icons'
import { v4 as uuidv4 } from 'uuid';

import { createNetwork, getNetworks } from '@/services/networks';
import { useModel, Link } from 'umi';

export default () => {
  const [responsive, setResponsive] = useState(false);
  const { networks, loading } = useModel('networks');

  type FieldType = {
    name?: string;
    token?: string;
  };

  const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
    values.token = uuidv4();
    console.log('Success:', values);
    createNetwork({ name: values.name, token: values.token }).then(() => {
      Modal.info({
        title: 'Create network success',
        content: (
          <div>
            <p>Network Name: {values.name}</p>
            <p>Token: {values.token}</p>
          </div>
        ),
        onOk() {window.location.reload()},
      });
    });
  };

  const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Row align='middle' style={{ marginTop: 100 }}>
      <Col span={18} offset={3}>
        <RcResizeObserver
          key="resize-observer"
          onResize={(offset) => {
            setResponsive(offset.width < 596);
          }}
        >
          <ProCard
            title="Networks"
            // extra="2019年9月28日"
            split={responsive ? 'horizontal' : 'vertical'}
            bordered
            headerBordered
          >
            <ProCard title="Select Network" colSpan="70%" style={{ backgroundColor: 'rgb(240, 242, 245)' }}>
              <Row gutter={[16, 16]}>
                {networks.map(network => (

                  <Col span={8} key={network.name}>
                    <Card title={network.name} bordered={true} extra={<Link to={'/networks/' + network.name}>Enter</Link>}>
                      <Row gutter={16}>
                        <Col span={12}>
                          <Statistic title="#Devices" value={network.devicesList.length} prefix={<GoldOutlined />} />
                        </Col>
                        <Col span={12}>
                          <Statistic title="#Links" value={network.linksList.length / 2} prefix={<ApiOutlined />} />
                        </Col>
                      </Row>
                    </Card>
                  </Col>
                ))}
              </Row>
            </ProCard>
            <ProCard title="Create Network">
              <Form
                name="basic"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
                style={{ maxWidth: 600 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
              >
                <Form.Item<FieldType>
                  label="Name"
                  name="name"
                  rules={[{ required: true, message: 'Please input network name!' }]}
                >
                  <Input />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                  <Button type="primary" htmlType="submit">
                    Create Network
                  </Button>
                </Form.Item>
              </Form>
            </ProCard>
          </ProCard>
        </RcResizeObserver>
      </Col>
    </Row>
  );
};